<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/index.css">

    <title>Document</title>
    <style>
        .im {
            height: 150px;
            width: 100%;
            margin-bottom: 20px;
        }

        .im>div {
            height: 100%;
            width: 100%;
        }

        .num {
            width: 73px;
            height: 73px;
            font-size: 16px;
            text-align: center;
            display: block;
            margin: 50px 0 0 0;
            font-size: 20px;
            color: #000;
            border: 1px solid black;
        }

        .jian {
            position: absolute;
            top: 0;
            left: 82px;
        }

        .jia {
            position: absolute;
            top: 38px;
            left: 82px;
        }

        .media img {
            width: 300px;
            height: 300px;
        }

       .media-body p {
            font-size: 60px;
            color: red
        }
    </style>
</head>

<body>
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/cookie.js"></script>


    <!-- 顶部 -->
    <div class="nav-w">
        <div class="w1200 nav">
            <div class="heater-nav-content">
                <a href="">
                    <i></i>
                    首页
                </a>
                <a href="">
                    <i></i>
                    商城
                </a>
                <a href="">
                    我的订单
                </a>
                <a href="">

                    关于我们
                    <i class="icon-deltail"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- 头部-->
    <div class="head">
        <header class="w1200">
            <img src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt="">
            <div class="header-ca">
                <i></i>
                目录
            </div>
            <div class="right">
                <div>
                    <!-- 搜索栏 -->
                    <div class="search bar1">
                        <form>
                            <input type="text" placeholder="请输入您要搜索的内容...">
                            <button type="submit"></button>
                        </form>
                    </div>
                    <!-- 导航栏 -->
                    <div class="r-nav">
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_626h76eek6jgl5621492ck0438af3_48x44.png"
                                alt="">
                            <figcaption>消息</figcaption>
                        </figure>
                        <figure>
                            <img src="	https://s10.mogucdn.com/mlcdn/c45406/181016_1e18fbc53dab5f8f6c45h6e57954d_44x44.png"
                                alt="">
                            <figcaption>收藏</figcaption>
                        </figure>
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_22cba5f6a88gdl2gf42i14hj7flk8_48x46.png"
                                alt="">
                            <figcaption> <a href="">购物车</a> </figcaption>
                        </figure>
                        <figure>
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181205_2f1dbgdfffde6147cfl3e09864lge_40x40.png"
                                alt="">
                            <figcaption>二维码</figcaption>
                        </figure>
                    </div>
                    <!-- 登录 -->
                    <div class="login">

                        <img src="	https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png"
                            alt="">
                        <a href="./login.html"> 登录
                        </a>
                    </div>
                </div>

            </div>
        </header>
    </div>

    <div class="im">
        <div
            style="background-image: url(https://s10.mogucdn.com/mlcdn/c45406/180411_2ff0j9ed072h69l372h2l5f4jjb7e_3840x300.png);background-repeat: no-repeat;background-size: cover;background-position: center center;">
        </div>
    </div>
    <div class="container" style="box-shadow: 0px 0px 15px 0px black;"></div>
    <!-- 底部 -->
    <div class="bot">
        <!-- 维修服务模块 -->
        <div class="server w1200">
            <img src="https://s10.mogucdn.com/mlcdn/c45406/181112_4a8ch8fac2i12ib313hif4da35ed3_280x76.png" alt="">
        </div>
        <!-- 尾部列表模块 -->
        <div class="footerlist w1200">
            <div class="footerleft">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>关于小米</dt>
                    <dd><a href="#">了解我们</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                    <dd><a href="#">投资者关系</a></dd>
                    <dd><a href="#">企业社会责任</a></dd>
                    <dd><a href="#">廉洁举报</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">用户指南</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                </dl>
            </div>
            <div class="footerright">
                <mark>400-100-5678</mark>
                <p>8:00-18:00（仅收市话费）</p>
                <div><span class="iconfont icon-shouji"></span> 人工客服</div>
                <p>
                    关注蘑菇街
                    <span class="iconfont icon-gouwucheman"></span>
                    <span class="iconfont icon-fangdajing1"></span>
                </p>
            </div>
        </div>
        <!--  -->
        <footer>
            <div class="w1200">

                <div>
                    <p>
                        <a href="#">商城</a>|
                        <a href="#">MIU</a>|
                        <a href="#">家</a>|
                        <a href="#">聊</a>|
                        <a href="#">多看</a>|
                        <a href="#">游戏</a>|
                        <a href="#">政企服务</a>|
                        <a href="#">天猫店</a>|
                        <a href="#">集团隐私政策</a>|
                        <a href="#">公司儿童信息保护规则</a>|
                        <a href="#">商城隐私政策</a>|
                        <a href="#">商城用户协议</a>|
                        <a href="#">问题反馈</a>|
                        <a href="#"> Select Location</a>
                    </p>
                    <p>
                        <a href="#">北京互联网法院法律服务工作站</a>|
                        <a href="#">中国消费者协会</a>|
                        <a href="#">北京市消费者协会</a>
                    </p>
                    <span>
                        © <mi.com href="#">mi.com</a> 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号
                            京网文[2020]0276-042号
                    </span>
                    <span>
                        <a href="">（京）网械平台备字（2018）</a>第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告
                    </span>
                    <span>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</span>
                    <span>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
                </div>
            </div>

        </footer>
    </div>
    <script>

        let goods_msg = {};
        setPage();
        async function setPage() {
            //获取浏览器地址
            const urlObj = myGetUrlVal();
            //发送请求
            const res = await myPromiseAjax('../server/goods_detail.php', 'post', { goods_id: urlObj.goods_id }, 'json');
           
            goods_msg = res;
             console.log(goods_msg);

            //动态生成页面
            let str = `
            <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">商品详细信息</h3>
      </div>
      <div class="panel-body">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="${res.goods_small_logo}" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">${res.goods_name}</h4>
            <p>
              <i class="glyphicon glyphicon-yen"></i>
              <span>${res.goods_price}</span>
            </p>
            <div class="btn-group" role="group" aria-label="...">
              <button type="button" class="btn btn-default">XL</button>
              <button type="button" class="btn btn-default">L</button>
              <button type="button" class="btn btn-default">M</button>
              <button type="button" class="btn btn-default">S</button>
              <button type="button" class="btn btn-default">XS</button>
            </div>
            <p style="position:relative">
              <input value="1" name="num" class="num">
              <button type="button" name="-" class="jian btn btn-default">-</button>
              <button type="button" name="+" class="jia btn btn-default">+</button>
            </p>
            <p>
              <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
              <a href="javascript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
            </p>
          </div>
        </div>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
          <li role="presentation"><a href="#">商品参数信息</a></li>
          <li role="presentation"><a href="#">相关商品</a></li>
        </ul>
        <div>
            ${res.goods_introduce}
        </div>
      </div>
    </div>           
            `
            $('.container').html(str);
        }

        // 点击加入购物车
        $('.container').on('click', '[name="cart"]', function () {
            const cookieObj = myGetCookie();
            console.log(cookieObj);
            //判断是否登录
            if (cookieObj.login === undefined) {
                if (window.confirm('您还没有登录，点击确认跳转登录页')) {
                    window.location.href = `./login.html?${window.location.href}`;
                }
            } else {
                let cart = window.localStorage.getItem('cart');
                if (cart === null) {
                    goods_msg.buy = true;
                    goods_msg.num = $('[name="num"]').val() - 0;
                    window.localStorage.setItem('cart', JSON.stringify([goods_msg]));
                } else {
                    //有购物车但是购物车为空时
                    cart = JSON.parse(cart);
                    if (cart.length === 0) {
                        goods_msg.buy = true;
                        goods_msg.num = $('[name="num"]').val() - 0;

                        cart.unshift(JSON.stringify(goods_msg));
                        window.localStorage.setItem('cart', JSON.stringify(cart));
                    } else {
                        let bool = cart.some(function (val) {
                            return val.goods_id === goods_msg.goods_id;
                        })

                        console.log(bool);
                        if (bool) {
                            //商品存在
                            for (let i = 0; i <= cart.length - 1; i++) {
                                if (cart[i].goods_id === goods_msg.goods_id) {
                                    cart[i].num = cart[i].num + ($('[name="num"]').val() - 0) > goods_msg.goods_number ? goods_msg.goods_number : cart[i].num + ($('[name="num"]').val() - 0);
                                    break;
                                }
                            }
                            //循环结束 商品的数量更新
                            //重新设定localStorage
                            window.localStorage.setItem('cart', JSON.stringify(cart));
                        } else {
                            //商品信息不存在
                            goods_msg.buy = true;
                            goods_msg.num = $('[name="num"]').val() - 0 > goods_msg.goods_number ? goods_msg.goods_number : $('[name="num"]').val() - 0;

                            cart.unshift( goods_msg );
                            window.localStorage.setItem('cart', JSON.stringify(cart));
                        }

                    }


                }

              
                window.location.href = './cart.html';
            }


        })

        $('.container').click(function (e) {
            if (e.target.getAttribute('name') === '-') {
                $('[name="num"]').val($('[name="num"]').val() - 0 - 1 < 1 ? 1 : $('[name="num"]').val() - 0 - 1);
            } else if (e.target.getAttribute('name') === '+') {
                $('[name="num"]').val($('[name="num"]').val() - 0 + 1 > goods_msg.goods_number - 0 ? goods_msg.goods_number - 0 : $('[name="num"]').val() - 0 + 1);
            }
        })

        // input标签添加失去焦点判断
        $('.container').on('blur', '[name="num"]', function () {
            // 如果数值 小于 1 赋值 1
            if ($('[name="num"]').val() - 0 < 1) {
                window.alert('最小是不能小于1');
                $('[name="num"]').val(1);

                // 如果数值 大于 库存 赋值 库存
            } else if ($('[name="num"]').val() - 0 > goods_msg.goods_number - 0) {
                window.alert('最大值不能大于库存数值');
                $('[name="num"]').val(goods_msg.goods_number - 0);
            }
        })

    </script>
</body>

</html>